<template>
	<fu-loading v-if="!init"></fu-loading>
	<view class="page" v-else>
		<!-- 自定义头部 start -->
		<view class="cu-custom header">
			<view class="cu-bar fixed bg act" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' ,}">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content" :style="[{ top: StatusBar + 'px' }]">{{i18n['会员权益']}}</view>
			</view>
			<view :style="{ height: CustomBar + 'px' }"></view>
		</view>
		<!-- 自定义头部 end -->

		<view class="bg-top">
			<view class="card" v-if='vipInfo.user_vip !=1'>
				<view class="flex head_info">
					<view class="image">
						<fu-image :src="userInfo.head_img " mode="aspectFill" radius="50%"></fu-image>
					</view>
					<view>
						<view class="info-name">{{userInfo.user_name}}</view>
						<view class="info-content">{{i18n['您当前未开通会员']}}</view>
					</view>
				</view>
				<view class="btn" @click='openVip()'>
					{{i18n['开通会员']}}￥{{gradeListvip.price}}
				</view>
			</view>
			<view class="card-2" v-if='vipInfo.user_vip ==1'>
				<view class="flex head_info">
					<view class="image">
						<fu-image :src="userInfo.head_img " mode="aspectFill" radius="50%"></fu-image>
					</view>
					<view>
						<view class="info-name">{{userInfo.user_name}}</view>
						<view class="info-img">
							<image :src="imgWechatUrl+'/member/vip.png'" />

						</view>
					</view>

				</view>
				<view class="flex justify-between info-bottom">
					<view>
						{{i18n['有效期']}}：{{vipInfo.level_name}}
					</view>
					<view>
						{{i18n['会员卡号']}}：{{vipInfo.card_number}}
					</view>

				</view>

			</view>
		</view>
		<view class="info">
			<view class="h4">
				{{i18n['会员权益']}}
			</view>
			<view class="p">
				<!-- 1、直接充值成为会员，无时间限制
				<br>
				2、会员可享受购买商品优惠。 -->
				<view v-html='gradeListvip.content'>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
				init: '',
				userInfo: {}, // 当前登录用户的用户信息
				order_sn: '',
				vipInfo: {},
				gradeListvip: {},
			}
		},
		onShow() {
			this.getmemberListvip()
			this.getmemberuserInfovip()
		},
		onLoad() {
			// 用户信息
			let userInfo = this.$store.state.userInfo;
			this.userInfo = userInfo || {};
		},
		methods: {
			// 获取用户会员信息
			getmemberuserInfovip() {
				this.$api.post(global.apiUrls.memberuserInfovip, {
				}).then(res => {
					if (res.data.code == 1) {
						console.log(res.data)
						this.init = true;
						this.vipInfo = res.data.data
					}
				})
			},
			// 获取vip等级列表
			getmemberListvip() {
				this.$api.post(global.apiUrls.memberListvip, {
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data[0].content = res.data.data[0].content.replace(/\n/g, '<br/>');
						this.gradeListvip = res.data.data[0]

					}
				})
			},
			//返回上一页
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			openVip() {
				this.$util.debounce(() => {
					var data = {
						payable_money: this.gradeListvip.price,
						level_id: this.gradeListvip.id,
						order_type: '16',
					}
					this.$api.post(global.apiUrls.postAddOrder, data).then(res => {
						if (res.data.code == 1) {
							console.log(res)
							this.$message.info(this.i18n['请支付…']);
							setTimeout(() => {
								this.$urouter.navigateTo({
									url: "/pages/member/vip/pay-vip/index",
									params: {
										order_sn: res.data.data.order_sn,
									},
								});
							}, 800);

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					})
				}, 1500, true);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F9;
	}
	.page {
		background: url($IMG_WECHAT_URL+'/member/isvipback.png') no-repeat;
		background-size: 100% 456rpx;
	}

	/deep/.cu-bar .action:first-child>uni-text[class*="cuIcon-"] {
		color: #FFF;
	}

	.header {
		color: #FFF;

		.act {
			background: url($IMG_WECHAT_URL+'/member/isvipback.png') no-repeat top;
		}
	}

	.bg-top {
		height: 456rpx;
		background: url($IMG_WECHAT_URL+'/member/isvipback.png') no-repeat top;
		background-size: 100% 100%;
		margin-top: -88rpx;
		position: relative;
	}

	.card {
		margin-top: 145rpx;
		left: 50%;
		margin-left: -351rpx;
		width: 702rpx;
		height: 380rpx;
		background: url($IMG_WECHAT_URL+'/member/supervip.png') no-repeat top;
		background-size: 100% 100%;
		position: absolute;

		.head_info {
			margin: 32rpx;
		}

		.image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.info-name {
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.info-content {
			color: #FFFFFF;
			font-size: 24rpx;
			margin-top: 8rpx;
		}

		.btn {
			position: absolute;
			bottom: 32rpx;
			left: 50%;
			margin-left: -160rpx;
			width: 320rpx;
			height: 72rpx;
			background-color: #fff;
			color: #4B4B55;
			line-height: 72rpx;
			border-radius: 40rpx;
			text-align: center;
		}
	}

	.card-2 {
		margin-top: 145rpx;
		left: 50%;
		margin-left: -351rpx;
		width: 702rpx;
		height: 380rpx;
		background: url($IMG_WECHAT_URL+'/member/supervip-2.png') no-repeat top;
		background-size: 100% 100%;
		position: absolute;

		.head_info {
			margin: 32rpx;
		}

		.image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.info-name {
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.info-content {
			color: #FFFFFF;
			font-size: 24rpx;
			margin-top: 8rpx;
		}

		.info-bottom {
			color: #fff;
			position: absolute;
			bottom: 32rpx;
			width: 100%;
			padding: 0 32rpx;
			font-size: 24rpx;
		}

		.info-img {
			width: 48rpx;
			height: 26rpx;
			margin-top: 8rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.info {
		padding: 24rpx;
		margin-top: 88rpx;

		.h4 {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
			font-weight: 600;
		}

		.p {
			font-size: 24rpx;
			color: #333333;
			line-height: 2;
		}
	}
</style>